<template>
	<div class="upload-cover" @click="uploadDialogVisible = true">
		<div class="upload-cover__wrapper">
			<img :src="value" v-if="value">
			<img :src="coverImage" ref="coverRef" v-else-if="coverImage">
			<i v-else class="el-icon-picture-outline"></i>
		</div>

		<!--
			对话框
		-->
		<el-dialog title="上传素材" :visible.sync="uploadDialogVisible" width="50%" append-to-body @close="uploadDialogClosed">
			<!--
				Tbas
			-->
			<el-tabs v-model="activeName" type="card">
				<!-- 选择素材 -->
				<el-tab-pane label="素材库" name="source">

					<source-list isShowSelected ref="sourceRef" />

				</el-tab-pane>
				<!-- 上传素材 -->
				<el-tab-pane label="上传素材" name="upload">
					<label :for="'file' + coverIndex">
						<div class="select-source">
							<img ref="imageRef" v-show="selected">
							<i v-show="!selected" class="el-icon-plus"></i>
						</div>
					</label>
					<input type="file" ref="fileRef" class="hidden" :id="'file' + coverIndex" @change="uploadChanged" />
				</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button @click="uploadDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="uploadImage">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import sourceList from '@/components/SourceList.vue'
	import {
		updateImage
	} from '@/api/article.js'
	export default {
		data () {
			return {
				uploadDialogVisible: false,
				activeName: 'source',
				selected: false,
				coverImage: ''
			}
		},
		methods: {
			uploadChanged () {
				const file = this.$refs.fileRef.files[0]
				const blob = window.URL.createObjectURL(file)
				this.selected = true
				this.$refs.imageRef.src = blob
			},
			// 上传图片
			uploadImage () {
				if (this.activeName === 'upload') {
					// 判断是否选中图片
					if (!this.selected) {
						return this.$message.info('请选择上传的图片！')
					}
					const file = this.$refs.fileRef.files[0]
					const blob = window.URL.createObjectURL(file)
					const fd = new FormData()
					fd.append('image', file)
					// 发起请求
					updateImage(fd).then(({
						data: res
					}) => {
						this.$message.success('上传素材成功！')
						// this.$refs.coverRef.src = res.data.url
						this.coverImage = res.data.url
						this.uploadDialogVisible = false

						// 告诉其他组件我上传了照片
						this.$emit('input', res.data.url)
					}).catch(err => {
						this.$message.error('上传素材失败：' + err)

						// 以下3行是测试代码
						// this.$refs.coverRef.src = blob
						this.coverImage = blob
						this.uploadDialogVisible = false
						this.$emit('input', this.coverImage)
					})

					// 选择素材库时
				} else if (this.activeName === 'source') {
					const el = this.$refs.sourceRef
					const selected = this.$refs.sourceRef.selected

					if (selected === null) {
						return this.$message.info('请选择素材！')
					}

					this.uploadDialogVisible = false

					console.log(el.imagesSource[selected].url)
					this.$emit('input', el.imagesSource[selected].url)
				}
			},

			// 上传图片对话框关闭事件
			uploadDialogClosed () {
				this.selected = false
				this.$refs.imageRef.src = ''
			}
		},
		props: {
			value: {
				type: String
			},
			coverIndex: {
				type: Number
			}
		},
		components: {
			sourceList
		}
	}
</script>

<style lang="less" scoped>
	.upload-cover {
		float: left;
		margin-right: 15px;

		.upload-cover__wrapper {
			width: 180px;
			height: 180px;
			border: 1px dotted #cacaca;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			i {
				font-size: 20px;
				color: #cacaca;
			}
		}
	}

	.select-source {
		width: 180px;
		height: 180px;
		border: 1px dotted #cacaca;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #cacaca;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
</style>
